<!-- 把关师认证 -->

<template>
	<view>
		<view class="top-pane">
			<navigator open-type="navigateBack" class="back-btn">
				<text class="iconfont icon-zuo"></text>
			</navigator>

			<view class="top-title">
				<view class="font-bold u-font-40 u-m-b-20">把关师认证</view>
				<view class="">适合拥有专业技能经验凭证（证件）的人或商家。</view>
			</view>
		</view>

		<view class="content">

			<view class="renz-form">
				<view class="u-font-34 font-medium">认证条件</view>
				<u-cell-group :border="false">
					<u-cell-item title="1.实名认证" :value="isReal?'已认证':'待认证'" :title-style="{color:'#000',fontSize:'30rpx'}"
						@click="toRealPage" :value-style="{color:'#999999',fontSize:'30rpx'}">
						<template slot="icon">
							<view class="u-flex u-row-center u-m-r-20 radius10"
								style="background-color: #B8D7FF;width: 50rpx;height: 50rpx;">
								<text class="iconfont icon-shimingrenzheng u-font-28" style="color: #237BFF;"></text>
							</view>
						</template>
					</u-cell-item>
					<u-cell-item title="2.资料完善" :value="isGen?'已完善':'待完善'" :title-style="{color:'#000',fontSize:'30rpx'}"
						@click="toProfilePage" :value-style="{color:'#999999',fontSize:'30rpx'}">
						<template slot="icon">
							<view class="u-flex u-row-center u-m-r-20 radius10"
								style="background-color: #F9E3E0;width: 50rpx;height: 50rpx;">
								<text class="iconfont icon-wenjian u-font-28" style="color: #FF7866;"></text>
							</view>
						</template>
					</u-cell-item>
				</u-cell-group>
				<view style="margin-top: 120rpx;">
					<u-button type="primary" hover-class="none" shape="circle" @click="submitHandle" :loading="loading">
						{{btnText}}
					</u-button>
				</view>
			</view>

			<!-- 提示 -->
			<view class="tips-content">
				<view class="u-font-34 font-medium u-flex u-row-center u-m-b-40">温馨提示</view>
				<view class="tips-item">1.完成2项任务后解锁审核成为把关师按钮，提交申请后审核时间为1-3个工作日。</view>
				<view class="tips-item">2.资料中把关师必填项，成为把关师后修改需进行审核。</view>
				<view class="tips-item">3.成为把关师后，需要发布至少发布一项能提供的帮助，平台会定期审核关闭无服务的把关师。</view>
			</view>
		</view>
	</view>
</template>

<script>
	import common from '@/utils/wxApplet/common.js'
	export default {
		name: 'renzheng',
		data() {
			return {
				isReal: false,
				isGen: false,
				loading: false,
				btnText: '',
				status: 0
			}
		},
		onShow() {
			this.initPage()
		},
		methods: {
			initPage() {
				const userInfo = this.$store.state.vuex_userInfo;
				this.isReal = userInfo.is_real == 1
				this.isGen = userInfo.is_gen == 1
				this.status = userInfo.power_status
				switch (this.status) {
					case -1:
						this.btnText = '重新申请认证'
						break;
					case 0:
						this.btnText = '申请认证'
						break;
					case 1:
						this.btnText = '审核中...'
						break;
					case 2:
						this.btnText = '已通过'
						break;
				}
			},
			toRealPage() {
				let url = ''
				if (this.status == 1) {
					this.$u.toast("正在审核中...")
					return
				}
				if (this.isReal) {
					url = '/pages/subpage/setting/sminfo'
				} else {
					url = '/pages/subpage/profile/autonym'
				}
				this.$u.route(url)
			},
			toProfilePage() {
				if (this.status == 1) {
					this.$u.toast("正在审核中...")
					return
				}
				this.$u.route('/pages/subpage/profile/profile', {
					required: true
				})
			},
			submitHandle() {
				if (!this.isReal) {
					this.$u.toast('请先通过实名认证')
					return
				}
				if (!this.isGen) {
					this.$u.toast('请先完善个人资料')
					return
				}
				if (this.status == '1') {
					this.$u.toast('您已提交申请，请耐心等待')
					return
				}
				if (this.status == '2') {
					this.$u.toast('申请已通过，请勿重复申请')
					return
				}
				this.loading = true
				this.$u.api.applyPowerHandle().then(res => {
					this.$u.toast('申请已提交，请等待1-3个工作日')
					setTimeout(() => {
						common.getUserInfo().then(res => {
							this.initPage()
						})
					}, 1000)
				}).finally(() => {
					this.loading = false
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.top-pane {
		height: 410rpx;
		background-size: cover;
		position: relative;
		color: #fff;
		background-image: url('https://bangbaguan.oss-cn-shanghai.aliyuncs.com/APP/renzbg.png');

		.back-btn {
			position: fixed;
			left: 30rpx;
			top: 106rpx;
			color: #fff;
			font-size: 32rpx;
		}

		.top-title {
			position: absolute;
			top: 157rpx;
			left: 68rpx;
		}
	}

	.content {
		padding: 0 30rpx;
		position: relative;
		z-index: 100;
		transform: translateY(-82rpx);

		.renz-form {
			border-radius: 20rpx;
			padding: 30rpx 40rpx 60rpx;
			background-color: #fff;
			margin-bottom: 30rpx;
			overflow: hidden;
		}

		.tips-content {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 35rpx 50rpx 60rpx;
		}

		.tips-item {
			font-size: 28rpx;
			line-height: 40rpx;
			margin-bottom: 36rpx;
		}
	}
</style>